<template>
  <div class="psot" @click="$router.push({path:`/artcle/${post.id}`})">
      <div class="typel" v-if="post.type=== 1&& post.cover.length<3">
          <div class="left">
              <h3 class="titel">{{post.title}}</h3>
              <p class="desc">
                  <span>{{post.user.nickname}}</span>
                  <span>{{post.comment_length}}跟帖</span>
              </p>
          </div>
          <van-image
            fit="cover"
            class="right"
            :src="post.cover[0].url|imgUrl"
          />
      </div>
      <!-- 形态2：上下结构 - 3张图 -->
      <div class="type2" v-else-if="post.type === 1 && post.cover.length >= 3" >
      <h3 class="title">{{ post.title }}</h3>
      <div class="cover-group">
        <van-image
          fit="cover"
          class="cover-img"
          v-for="item in post.cover"
          :key="item.id"
          :src="item.url|imgUrl"
        />
      </div>
      <p class="desc">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comment_length }}跟帖</span>
      </p>
    </div>
      <!-- 形态3：上下结构 - 1个视频 -->
      <div class="type3" v-else-if="post.type === 2">
      <h3 class="title">{{ post.title }}</h3>
      <div class="video-group">
        <i class="iconfont iconshipin"></i>
        <van-image
          fit="cover"
          class="video-img"
          :src="post.cover[0].url|imgUrl"
        />
      </div>
      <p class="desc">
        <span>{{ post.user.nickname }}</span>
        <span>{{ post.comment_length }}跟帖</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
      post:{
          type:Object,
          required:true,
      }
  }
}
</script>

<style lang="less" scoped>
// 公共样式
.post {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
// 标题和跟帖都是一样的，所以写到外面，变成公共的
.title {
  font-size: 16px;
  margin: 5px 0;
}
.desc{
    color:#666;
    margin:5px 0;
    span{
        font-size:12px;
        margin-right: 10px;
    }
}
.typel{
    display: flex;
    padding: 10px;
    background-color:#fff;
    .left{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .titel{
            font-size:16px;
        }
        
    }
    .right{
        width:120px;
        height:75px;
        
    }
}
.type2 {
  background-color: skyblue;
  padding: 0 10px;
  .cover-group {
    display: flex;
    justify-content: space-between;
    .cover-img {
      width: 33%;
    }
  }
}
// 形态3：上下结构 - 1个视频
.type3 {
  background-color: yellowgreen;
  .video-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconshipin {
      font-size: 50px;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .video-img {
      width: 100%;
    }
  }
}
</style>